import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
import { useRuntime } from '@renderer/hooks/useRuntime'
import { Input as AntdInput, Tooltip } from 'antd'
import { InputRef } from 'rc-input/lib/interface'
import React, { useRef } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'

interface InputBarProps {
  text: string
  model: any
  referenceText: string
  placeholder: string
  handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  onModelSelect?: () => void
}

const InputBar = ({
  ref,
  text,
  model,
  placeholder,
  handleKeyDown,
  handleChange,
  onModelSelect
}: InputBarProps & { ref?: React.RefObject<HTMLDivElement | null> }) => {
  const { generating } = useRuntime()
  const { t } = useTranslation()
  const inputRef = useRef<InputRef>(null)
  if (!generating) {
    setTimeout(() => inputRef.current?.input?.focus(), 0)
  }
  return (
    <InputWrapper ref={ref}>
      <ModelAvatarWrapper onClick={onModelSelect} className="nodrag">
        <Tooltip title={t('miniwindow.tooltip.select_model')} mouseEnterDelay={0.8} placement="top">
          <ModelAvatar model={model} size={30} />
        </Tooltip>
      </ModelAvatarWrapper>
      <Input
        value={text}
        placeholder={placeholder}
        variant="borderless"
        autoFocus
        onKeyDown={handleKeyDown}
        onChange={handleChange}
        disabled={generating}
        ref={inputRef}
      />
    </InputWrapper>
  )
}
InputBar.displayName = 'InputBar'

// 这里是输入框组件 InputBar.tsx
// 只负责渲染输入框、处理输入事件（如 onKeyDown、onChange），以及聚焦和禁用状态
// 不负责问答检索知识库的核心逻辑
// 你的问题、消息会通过 handleKeyDown 事件传递到父组件（如 HomeWindow.tsx），再由父组件分发到后端或服务层处理

const InputWrapper = styled.div`
  display: flex;
  align-items: center;
  margin-top: 10px;
`

const ModelAvatarWrapper = styled.div`
  cursor: pointer;
  transition: transform 0.2s;
  &:hover {
    transform: scale(1.1);
  }
`

const Input = styled(AntdInput)`
  background: none;
  border: none;
  -webkit-app-region: none;
  font-size: 18px;
`

export default InputBar
